<template>
  <div class='toolBar'>
    <!-- this is  {{ name }} -->
     <!-- <div v-for="game in gameList">
      {{ game.gameName }}
     </div> -->
     <div v-for="toolBar in toolBarStr" class="toolBar_content" :style="`background-color: ${currentName === toolBar.id ?  '#e674ff' : ''}`" @click="switchView(toolBar.id)">
      {{ toolBar.name }}
     </div>
  </div>
</template>

<script setup lang='ts'>
import router from '@renderer/router/router';
import { computed } from 'vue';
import { useRoute } from 'vue-router'

const route = useRoute()
const currentName = computed(()=>route.name)

// import { ref } from 'vue';
// const name = ref('toolBar')

// interface Game {
//   gameName: string
//   img: string
//   description: string
// }

// defineProps<{
//   gameList: Game[]
// }>()

  const toolBarStr = [
    {
      name: '主页',
      icon: '',
      id: 'home'
    },
    {
      name: '辅助',
      icon: '',
      id: 'install'
    },
    {
      name: '设置',
      icon: '',
      id: 'settings'
    },
    // {
    //   name: '关于',
    //   icon: '',
    //   id: 'about'
    // }
  ]

  function switchView(id: string){
    router.push({
      name: id,
      query: {
        
      }
    })
  }

</script>
<style scoped lang='scss'>
  .toolBar {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    left: 0;
    background-color: rgba($color: #fff, $alpha: 0.3);
    height: 100vh;
    width: 80px;
    text-align: center;
    color: rgba($color: #000000, $alpha: 0.8);
  }
  .toolBar_content{
    width: 80px;
    height: 50px;
    transition: all 0.5s;
    &:hover{
      background-color: rgba($color: #df51ff, $alpha: 0.3);
      color: white;
    }
  }
</style>
